<script setup defer async lang="ts">
import { reactive, onMounted } from 'vue'
import { userTreeList } from '@/api/user'
// import { myNextLevel } from '@/api/user'
// import { formatDate } from '@/utils/utils'
import { useSwipeHandlers } from '@/utils/useSwipeHandlers'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

// 
interface CountTreeItem {
  accounts: number
  new_cnt: number
}

const baseData = reactive({
  condition: [0, 0],
  loading: false,
  page: 1,
  dataList: [],
  treeList: [],
  countTree: [
    {
      accounts: 0,
      new_cnt: 0,
    },
  ] as CountTreeItem[],
  aircraftUrl: uni.getStorageSync('aircraftUrl'),
})
// const getList = async () => {
// 	baseData.loading = true
// 	uni.showLoading({
// 		title: t('Loading'),
// 		icon: 'none'
// 	})
// 	let params : any = {
// 		page: baseData.page,
// 		pageSize: 20,
// 	}
// 	const res = await myNextLevel(params)
// 	if (res.code == 0) {
// 		uni.showToast({
// 			title: res.msg,
// 			icon: "none"
// 		})
// 		// console.log(res)
// 		// baseData.total = res.data.total
// 		if (res.data.list.length > 0) {
// 			baseData.dataList = baseData.dataList.concat(res.data.list)
// 			baseData.page++
// 		}
// 		baseData.loading = false
// 		uni.hideLoading()
// 	} else {
// 		baseData.loading = false
// 		uni.hideLoading()
// 		uni.showToast({
// 			title: res.msg,
// 			icon: "none"
// 		})
// 	}
// }
const rightClick = () => {
  handleSwipeRight()
}
const treeNode = (children: any, level: number) => {
  if (!baseData.countTree[level]) {
    baseData.countTree[level] = {
      accounts: 0,
      new_cnt: 0,
    }
  }
  baseData.countTree[level].accounts = baseData.countTree[level].accounts + children.length
  children.forEach((item: any) => {
    baseData.countTree[level].new_cnt = baseData.countTree[level].new_cnt + item.new_cnt
    if (item.children.length > 0) {
      treeNode(item.children, level + 1)
    }
  })
}
const countData = (tree: any) => {
  baseData.countTree[0].accounts = tree.length
  tree.forEach((item: any) => {
    baseData.countTree[0].new_cnt = baseData.countTree[0].new_cnt + item.new_cnt
    treeNode(item.children, 1)
  })
}
const initPage = async () => {
  uni.showLoading({
    title: t('Loading'),
  })
  
  try {
    const res = await userTreeList()
    if (res.code === 0) {
      baseData.treeList = res.data
      countData(baseData.treeList)
    } else {
      uni.showToast({
        title: res.msg,
        icon: 'none',
      })
    }
  } catch (error) {
    console.error(':', error)
    uni.showToast({
      title: '',
      icon: 'none',
    })
  } finally {
    uni.hideLoading()
  }
}
// 
const leftClick = () => {
  window.top?.postMessage('/pages/user/index', window.location.origin)
  uni.navigateTo({
    url: '/pages/user/index',
  })
}
const handleSwipeRight = () => {
  const pages = getCurrentPages()
  if (pages.length <= 1) {
    history.back()
  } else {
    uni.navigateBack()
  }
}
useSwipeHandlers(handleSwipeRight)
onMounted(() => {
  // 
  uni.setNavigationBarTitle({
    title: 'Amber ' + t('Earn money so easy') + '!', // 
  })
  // getList()
  initPage()
})
</script>

<template>
  <view class="level-container">

	<up-navbar :title="t('My Level')" @click="leftClick" :autoBack="true">
						<template #left>
						  <view class="nav-back-btn">
						    <image class="back-icon" src="../../../static/img/left.png"></image>
						  </view>
						</template>
					</up-navbar>
    
    <view class="levels-section">
      <view class="section-header">
        <text class="section-title">{{t('Level Statistics')}}</text>
        <text class="section-subtitle">{{t('Track your team performance')}}</text>
      </view>

      <view class="levels-list">
        <view class="level-card" v-for="(item, index) in baseData.countTree" :key="index">
          <view class="card-header">
            <view class="level-badge">
              <text class="level-number">{{ index + 1 }}</text>
              <text class="level-text">{{ t('Level') }}</text>
            </view>
            <view class="level-progress">
              <view class="progress-bar">
                <view class="progress-fill" :style="{ width: `${Math.min((item.accounts / 10) * 100, 100)}%` }"></view>
              </view>
            </view>
          </view>

          <view class="card-stats">
            <view class="stat-item">
           <!--   <view class="stat-icon users-icon">
                <image class="icon-image" src="@/static/img/users.png" mode="aspectFit"></image>
              </view> -->
              <view class="stat-content">
                <text class="stat-number">{{ item.accounts }}</text>
                <text class="stat-label">{{ t('Number of users') }}</text>
              </view>
            </view>

            <view class="stat-divider"></view>

            <view class="stat-item">
              <!-- <view class="stat-icon level-icon">
                <image class="icon-image" src="@/static/img/level.png" mode="aspectFit"></image>
              </view> -->
              <view class="stat-content">
                <text class="stat-number">{{ item.new_cnt }}</text>
                <text class="stat-label">{{ t('Efficient users') }}</text>
              </view>
            </view>
          </view>
        </view>

        
        <view class="empty-state" v-if="baseData.countTree.length === 0">
          <view class="empty-icon">
            <img src="@/static/img/empty120.png" mode="aspectFit" />
          </view>
          <text class="empty-title">No Level Data</text>
          <text class="empty-subtitle">Start building your team to see levels</text>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.level-container {
  min-height: 100vh;
  background-image: url("@/static/img/record_top.png");
      background-size: 100% 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  position: relative;
}



/*  */
.levels-section {
  padding: 30px 10px;
  margin-top: 20px;
  
  .section-header {
    margin-bottom: 25px;
    
    .section-title {
      display: block;
      font-size: 20px;
      font-weight: 700;
      color: #333;
      margin-bottom: 8px;
    }
    
    .section-subtitle {
      display: block;
      font-size: 14px;
      color: #666;
      font-weight: 500;
    }
  }
  
  .levels-list {
    .level-card {
      background: #ffffff;
      border: 1px solid #e0e0e0;
      padding: 20px;
      margin-bottom: 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;

      
      .card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        
        .level-badge {
          background:linear-gradient(to bottom, #93f94e, #faf859);
          color: #333333;
          padding: 5px;
          border-radius: 20px;
          display: flex;
          align-items: center;
          // gap: 8px;
          
          .level-number {
            font-size: 18px;
            font-weight: 700;
          }
          
          .level-text {
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.5px;
          }
        }
        
        .level-progress {
          flex: 1;
          margin-left: 20px;
          
          .progress-bar {
            width: 100%;
            height: 6px;
            background: #e0e0e0;
            border-radius: 3px;
            overflow: hidden;
            
            .progress-fill {
              height: 100%;
              background: linear-gradient(to right, rgb(147, 249, 78), rgb(250, 248, 89)) 0% 0%/cover;
              border-radius: 3px;
              transition: width 0.3s ease;
            }
          }
        }
      }
      
      .card-stats {
        display: flex;
        align-items: center;
        gap: 20px;
        
        .stat-item {
          flex: 1;
          display: flex;
          align-items: center;
          gap: 12px;
          
          .stat-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            
            &.users-icon {
              background: rgba(33, 150, 243, 0.1);
            }
            
            &.level-icon {
              background: rgba(76, 175, 80, 0.1);
            }
            
            .icon-image {
              width: 20px;
              height: 20px;
            }
          }
          
          .stat-content {
            flex: 1;
            
            .stat-number {
              display: block;
              font-size: 18px;
              font-weight: 700;
              color: #333;
              margin-bottom: 2px;
            }
            
            .stat-label {
              display: block;
              font-size: 12px;
              color: #666;
              font-weight: 500;
            }
          }
        }
        
        .stat-divider {
          width: 1px;
          height: 40px;
          background: #e0e0e0;
        }
      }
    }
    
    .empty-state {
      text-align: center;
      padding: 60px 20px;
      
      .empty-icon {
        margin-bottom: 20px;
        
        img {
          width: 60px;
          height: 60px;
          opacity: 0.5;
        }
      }
      
      .empty-title {
        display: block;
        font-size: 18px;
        font-weight: 600;
        color: #333;
        margin-bottom: 8px;
      }
      
      .empty-subtitle {
        display: block;
        font-size: 14px;
        color: #666;
        line-height: 1.5;
      }
    }
  }
}


</style>